<template>
	<el-main>
		<!-- 查询条件 -->
		<el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
			<el-form-item>
				<el-input placeholder="请输入部门名称" v-model="searchModel.departmentName">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="search()">查询
				</el-button>
				<el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
				<el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 数据表格 -->
		<el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px" row-key="id"
			default-expand-all :tree-props="{ children: 'children' }">
			<el-table-column prop="departmentName" label="部门名称"></el-table-column>
			<el-table-column prop="parentName" label="所属部门"></el-table-column>
			<el-table-column prop="phone" label="部门电话"></el-table-column>
			<el-table-column prop="address" label="部门位置"></el-table-column>
			<el-table-column label="操作" width="200" align="center">
				<template slot-scope="scope">
					<el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑
					</el-button>
					<el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<system-dialog 
			:title="deptDialog.title"
			:visible="deptDialog.visible"
			:width="deptDialog.width"
			:height="deptDialog.height"
			@onClose="onClose"
			@onConfirm="onConfirm"
			>
			<div slot="content">
				<el-form :model="dept" ref="deptForm" :rules="rules"
					label-width="80px" :inline="true" size="small">
					<el-form-item label="部门名称" prop="departmentName">
						<el-input v-model="dept.departmentName"></el-input>
					</el-form-item>
					<el-form-item label="部门电话">
						<el-input v-model="dept.phone"></el-input>
					</el-form-item>
					<el-form-item label="部门地址">
						<el-input v-model="dept.address"></el-input>
					</el-form-item>
					<el-form-item label="序号">
						<el-input v-model="dept.orderNum"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</system-dialog>
		
	</el-main>
</template>
<script>
//导入api脚本
import departmentApi from "@/api/department";
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';

export default {
    name: "department",
	components:{
		SystemDialog
	},
    data() {
        return {
            searchModel: {//查询条件
                departmentName: "", //部门名称
            },
            tableData: [], //表格数据列表
			//弹出框相关属性
			deptDialog: {
				title: "新增部门",
				visible: false, //是否显示
				width: 560,
				height: 170,
			},
			//部门对象
			dept: {
				id: "",
				pid: "1",
				parentName: "",
				departmentName: "",
				address: "",
				phone: "",
				orderNum: "",
			},
			//表单验证规则
			rules: {
				parentName: [{ required: true, trigger: "change", message: "请选择所属部门"}],
				departmentName: [{ required: true, trigger: "blur", message: "请输入部门名称" }],
			},
		}
    },
    methods: {
        async search() {//列表
            //发送查询请求
            let res = await departmentApi.getDepartmentList(this.searchModel);
            //判断是否存在数据
            if (res.success) {
                //获取数据
                this.tableData = res.data;
            }
        },
        resetValue() { //重置
            this.searchModel = {}; //清空数据
            this.search(); //重新调用方法
        },
		onClose() {
			//关闭窗口
			this.deptDialog.visible = false;
		},
		onConfirm() {
			console.log('提交');
			//表单验证
			this.$refs.deptForm.validate(async (valid) => {
				//如果验证通过
				if (valid) {
					console.log('提交');
					//发送查询请求
					let res =  null;
					if(this.dept.id == ""){
						res = departmentApi.addDept(this.dept);
					}else{
						res = departmentApi.updateDept(this.dept);
					}
					//判断是否存在数据
					if (res.success) {
						//获取数据
						this.deptDialog.visible = false;
						 //调用查询部门列表方法
						 this.search();
					}
				}
			});
		},
		openAddWindow() { //添加
			//清空表单数据
			this.$resetForm("deptForm", this.dept);
			//设置窗口标题
			this.deptDialog.title = "新增部门";
			//显示添加部门窗口
			this.deptDialog.visible = true;
		},
		handleEdit(row){
			//添加表单数据
			this.dept = row;
			//设置窗口标题
			this.deptDialog.title = "编辑部门";
			//显示添加部门窗口
			this.deptDialog.visible = true;
		},
		 async handleDelete(row){
			//提示框
			let confirm =await this.$myconfirm("确定要删除该数据吗?");
			if(confirm){
				 //发送查询请求
				 let res = await departmentApi.deleteById({id:row.id});
				//判断是否存在数据
				if (res.success) {
					//获取数据
					this.search();
				}
			}
		}
    },
    //初始化时执行
    created() {
        //调用查询部门列表方法
        this.search();
    }
};

</script>
<style lang="scss" scoped></style>
